<template>
  <div class="message_review">
    <el-row class="top_msg" :gutter="20">
      <el-col :span="3">
        <span class="num">{{ sceneInfo.userNum | transNumber }}</span>
        <p>互动人数</p>
      </el-col>
      <el-col :span="4">
        <span class="num">{{ sceneInfo.msgNum | transNumber }}</span>
        <p>消息数量</p>
      </el-col>
      <el-col :span="4">
        <span>
          <el-switch
            v-model="config.ismaudit"
            :active-value="1"
            :inactive-value="0"
            :active-color="activeColor"
            :inactive-color="inactiveColor"
          ></el-switch>
        </span>
        <p>人工审核</p>
      </el-col>
      <el-col :span="4">
        <span>
          <el-switch
            v-model="config.isvaudit"
            :disabled="!config.ismaudit"
            :active-value="1"
            :inactive-value="0"
            :active-color="activeColor"
            :inactive-color="inactiveColor"
          ></el-switch>
        </span>
        <p>审核VIP</p>
      </el-col>
      <el-col :span="4">
        <span>
          <el-switch
            v-model="config.iswaudit"
            :active-value="1"
            :inactive-value="0"
            :active-color="activeColor"
            :inactive-color="inactiveColor"
          ></el-switch>
        </span>
        <p>敏感词过滤</p>
      </el-col>
      <el-col :span="4">
        <span>
          <el-switch
            v-model="config.iswordft"
            :active-value="1"
            :inactive-value="0"
            :active-color="activeColor"
            :inactive-color="inactiveColor"
          ></el-switch>
        </span>
        <p>
          自定义敏感词 &nbsp;
          <el-button type="text" @click="showCustomSensitive = true">自定义</el-button>
        </p>
      </el-col>
    </el-row>
    <el-tabs class="message_table" style="margin-top:10px" v-model="activeName" @tab-click="handleClick">
      <!-- :stretch="true" -->
      <el-tab-pane
        v-for="tabItem in tabsList"
        :key="tabItem.name"
        :label="tabItem.label"
        :name="tabItem.name"
      >
        <message-review-form
          :key="tabItem.name"
          :loading="loading"
          :tabOpt="tabItem"
          :tableData="tableData"
          :page="pageSet"
          @fetchData="handleShunt"
          @changePage="handleShunt"
        ></message-review-form>
      </el-tab-pane>
    </el-tabs>
    <el-dialog custom-class="definedModal" title="敏感词设置" width="600" :visible="showCustomSensitive"  @before-close="closeCustomSensitive" @open="openDialog">
      <customSensitive ref="sencetive" :listData="config.worddiv"></customSensitive>
      <div slot="footer" style="text-align:right;">
        <el-button @click="closeCustomSensitive" round >取 消</el-button>
        <el-button type="primary" @click="addWord" round >确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { formatTime } from '@/utils/util';
import messageReviewForm from './messageReviewForm';
import customSensitive from './customSensitive';
export default {
    name: 'messageReview',
    components: {
        messageReviewForm,
        customSensitive,
    },
    created() {
        this.sceneid = this.$route.query.sceneId;
        this.fetchMsg(0);
        this.fetchConfig();
        this.fetchSceneInfo();
    },
    data() {
        return {
            activeColor: this.$styleVariables.activeSwitch,
            inactiveColor: this.$styleVariables.inactiveSwitch,
            sceneid: '',
            config: {
                ismaudit: '',
                isvaudit: '',
                iswaudit: '',
                iswordft: '',
                worddiv: "",
            },
            showCustomSensitive: false,
            loading: false,
            activeName: 'authstr',
            pageSet: {},
            tableData: [],
            timer: null,
            searchForm: {},
            tabsList: [
                {
                    label: '待审核',
                    name: 'authstr',
                    type: 1,
                    tableColumn: [
                        { prop: 'headimgurl', label: '头像' },
                        { prop: 'nickname', label: '昵称' },
                        {
                            prop: 'createtime',
                            label: '发送时间',
                            formatter: formatTime,
                        },
                        { prop: 'text', label: '发送内容' },
                        { prop: 'moduleName', label: '上屏模块' },
                    ],
                },
                {
                    label: '已上屏',
                    name: 'passed',
                    type: 1,
                    tableColumn: [
                        { prop: 'headimgurl', label: '头像' },
                        { prop: 'nickname', label: '昵称' },
                        {
                            prop: 'createtime',
                            label: '发送时间',
                            formatter: formatTime,
                        },
                        { prop: 'text', label: '发送内容' },
                        { prop: 'moduleName', label: '上屏模块' },
                        // { prop: 'handle', label: '操作' },
                    ],
                },
                {
                    label: '未通过',
                    name: 'nopass',
                    type: 1,
                    tableColumn: [
                        { prop: 'headimgurl', label: '头像' },
                        { prop: 'nickname', label: '昵称' },
                        {
                            prop: 'createtime',
                            label: '发送时间',
                            formatter: formatTime,
                        },
                        { prop: 'text', label: '发送内容' },
                        { prop: 'moduleName', label: '上屏模块' },
                    ],
                },
                {
                    label: 'VIP',
                    name: 'vip',
                    type: 2,
                    tableColumn: [
                        { prop: 'headimgurl', label: '头像' },
                        { prop: 'nickname', label: '昵称' },
                        {
                            prop: 'qdtime',
                            label: '签到时间',
                            formatter: formatTime,
                        },
                        {
                            prop: 'joinviptime',
                            label: '加入vip时间',
                            formatter: formatTime,
                        },
                    ],
                },
                {
                    label: '黑名单',
                    name: 'blacklist',
                    type: 2,
                    tableColumn: [
                        { prop: 'headimgurl', label: '头像' },
                        { prop: 'nickname', label: '昵称' },
                        {
                            prop: 'qdtime',
                            label: '签到时间',
                            formatter: formatTime,
                        },
                        {
                            prop: 'joinviptime',
                            label: '拉黑时间',
                            formatter: formatTime,
                        },
                    ],
                },
            ],
            sceneInfo: {
                userNum: 0,
                msgNum: 0,
            },
            isinit: true,
        };
    },
    methods: {
        // 处理不同类型的请求分流tab
        // 保存分页信息page
        // 保存筛选条件form
        handleShunt(tab, page, form) {
            //  保存当前分页

            if (typeof page === 'number') {
                this.pageSet.pageIndex = page;
            }
            // 保存当前查询条件
            if (form) {
                this.searchForm = form;
            }
            console.log('this.searchForm :', this.searchForm);
            switch (tab.name) {
                case 'authstr':
                    this.fetchMsg(0);
                    break;
                case 'passed':
                    this.fetchMsg(1);
                    break;
                case 'nopass':
                    this.fetchMsg(2);
                    break;
                case 'vip':
                    this.fetchUser(1);
                    break;
                case 'blacklist':
                    this.fetchUser(2);
            }
        },
        handleClick(tab) {
            // 初始化查询条件
            this.searchForm = {};
            // 初始化页码
            this.pageSet.pageIndex = 1;
            this.handleShunt(tab);
        },
        openDialog(){
          // dialog打开时 的回调，更新组件内数据
          this.$refs.sencetive && this.$refs.sencetive.initList();
        },
        closeCustomSensitive() {
            var worddiv = "";
            var { lists } = this.$refs.sencetive;
            if (lists.length > 0) {
                worddiv = lists.map(item=>{
                  return item.value
                }).toString();
            }
            // var lists = this.$refs.sencetive.lists.toString();
            // 判断是否更改
            if (worddiv != this.config.worddiv) {
                this.$confirm('当前设置还没有保存？', {
                    confirmButtonText: '保存',
                    cancelButtonText: '不保存',
                })
                    .then(_ => {
                        this.addWord();
                    })
                    .catch(_ => {
                        this.showCustomSensitive = false;
                    });
            } else {
                this.showCustomSensitive = false;
            }
        },
        addWord() {
          // 确定按钮，
            var { lists } = this.$refs.sencetive;
            if (lists.length > 0) {
                this.config.worddiv = lists.map(item=>{
                  return item.value
                }).toString();
            }

            this.showCustomSensitive = false;
        },
        fetchSceneInfo() {
            var para = {
                sceneid: this.sceneid,
            };
            this.$api.post(
                '/msgQxCfg/getMsgCfg',
                para,
                res => {
                    const { MSG_COUNT, HD_HR_COUNT } = res.msgNum;
                    this.sceneInfo = {
                        userNum: HD_HR_COUNT || 0,
                        msgNum: MSG_COUNT || 0,
                    };
                },
                err => {
                    this.$message.error(err);
                }
            );
        },
        // 获取设置信息
        fetchConfig() {
            var para = {
                sceneid: this.sceneid,
            };
            this.$api.post('/msgQxCfg/findCfgBySceneId', para, res => {
                this.config = {
                    ismaudit: res.ismaudit,
                    isvaudit: res.isvaudit,
                    iswaudit: res.iswaudit,
                    iswordft: res.iswordft,
                    worddiv: res.worddiv || "",
                };
                this.$nextTick(() => {
                    this.isinit = false;
                });
            });
        },
        debounce() {
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.updateConfig();
            }, 1000);
        },
        // 更新设置信息
        updateConfig() {
            var para = {
                sceneid: this.sceneid,
                ismaudit: this.config.ismaudit,
                isvaudit: this.config.isvaudit,
                iswaudit: this.config.iswaudit,
                iswordft: this.config.iswordft,
                worddiv: this.config.worddiv,
            };
            this.$api.post(
                '/msgQxCfg/updateCfgBySceneId',
                para,
                res => {
                    this.$message.success('设置成功');
                },
                err => {
                    this.$message.error(err);
                }
            );
        },
        // 获取不同类型的用户列表
        // type
        // 0 普通用户  1 vip用户  2 黑名单
        // page 分页
        // form  筛选条件
        // nickname 昵称
        // joinviptime  加入vip时间 / 加入黑名单时间
        fetchUser(type) {
            var para = {
                sceneid: this.sceneid,
                isvip: type,
                nickname: this.searchForm && this.searchForm.nickname,
                pageIndex: this.pageSet.pageIndex,
                pageSize: this.pageSet.pageSize,
                joinviptime:this.searchForm &&
                    this.searchForm.startData &&
                    this.searchForm.startData[0],
                joinvipendtime:this.searchForm &&
                    this.searchForm.startData &&
                    this.searchForm.startData[1]

            };
            this.loading = true;
            this.$api.post(
                '/ftUserInfo/queryVIPUserList',
                para,
                res => {
                    this.loading = false;
                    this.tableData = res.result;
                    this.pageSet = {
                        pageIndex: res.pageIndex, // 当前页码
                        pageSize: res.pageSize, // 每页条数
                        totalPage: res.totalPage, // 总页数
                    };
                },
                err => {
                    this.loading = false;
                }
            );
        },
        // 获取不同类型的消息
        // type 0 待审核 1 已上屏  2 未通过
        // page 分页信息
        // form 筛选条件
        fetchMsg(type) {
            // var nickname = "",
            //     createtime = "",
            //     msgendtime = "";
            // if(JSON.stringify(this.searchForm) !== "{}"){
            //   nickname = this.searchForm.nickname;
            //   createtime = this.searchForm.startData[0];
            //   msgendtime = this.searchForm.startData[1];
            // }
            var para = {
                sceneid: this.sceneid,
                isaudit: type,
                nickname: this.searchForm && this.searchForm.nickname,
                createtime:
                    this.searchForm &&
                    this.searchForm.startData &&
                    this.searchForm.startData[0],
                msgendtime:
                    this.searchForm &&
                    this.searchForm.startData &&
                    this.searchForm.startData[1],
                text: this.searchForm && this.searchForm.text,
                pageIndex: this.pageSet.pageIndex,
                pageSize: this.pageSet.pageSize,
            };
            this.loading = true;
            this.$api.post('/ftMessage/queryMsgList', para, res => {
                this.tableData = res.result;
                this.loading = false;
                console.log('res :', res);
                this.pageSet = {
                    pageIndex: res.pageIndex, // 当前页码
                    pageSize: res.pageSize, // 每页条数
                    totalPage: res.totalPage, // 总页数
                };
            });
        },
    },
    watch: {
        config: {
            handler(n, o) {
                if (!this.isinit) {
                    if (n.ismaudit === 0) {
                        n.isvaudit = 0;
                    }
                    this.debounce();
                }
            },
            deep: true,
        },
    },
    filters: {
        transNumber(num) {
            var ret = '';
            num = Number.parseInt(num);
            if (num === num) {
                num += '';
                ret = num.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                return ret;
            }
            return ret;
        },
    },
};
</script>

<style lang="scss">
.message_review {
    // width: 100%;
    .top_msg {
        // width: 100%;
        background-color: $main-content-bgc;
        margin: 20px!important;
        border-radius: 20px;
        padding: 10px 20px;
        // @include main-content;
        text-align: center;
      
        .el-col {
            position: relative;
            &:last-child:after {
                width: 0;
            }
            &:after {
                content: '';
                width: 1px;
                height: 40px;
                background-color: #cccccc;
                position: absolute;
                right: 0;
                top: 10px;
            }
            & > span {
                height: 40px;
                line-height: 40px;
            }
            span.num {
                color: #1994fa;
                font-size: 30px;
                font-weight: bold;
            }
        }
    }
    .message_table{
      @include main-content;
      .el-tabs__nav-wrap::after{
        height: 1px;
      }
    }
    .el-button--text span {
        text-decoration: underline;
    }

     
}
</style>